<!DOCTYPE html>
<html lang="fr">
<head>
    <title>Projet</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/layout.css">
    
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js"></script>
    <script type="text/javascript" src="js/builder.js"></script>
    <script type="text/javascript" src="js/effects.js"></script>
    <script type="text/javascript" src="js/dragdrop.js" ></script>
    <script type="text/javascript" src="js/controls.js"></script>
    <script type="text/javascript" src="js/slider.js"></script>
    <script type="text/javascript" src="js/sound.js"></script>
    <script type="text/javascript" src="js/protoshow.js"></script>
    <script type="text/javascript" src="js/carousel.js"></script>
    <script type="text/javascript" src="js/site.js"></script>
	<script type="text/javascript" src="js/modalbox.js"></script>
    <script type="text/javascript">
        document.createElement("header");
        document.createElement("footer");
        document.createElement("section");
        document.createElement("aside");
        document.createElement("nav");
        document.createElement("article");
        document.createElement("figure");
    </script>
<!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if IE 8]>         
	<html class="no-js lt-ie9" lang="fr"> 
<![endif]-->
<!--[if IE 9]>         
	<html class="no-js gt-ie8" lang="fr"> 
<![endif]-->
    
</head>
<body>
    <!-- wrapper -->
    <div id="wrapper">
		<h1><a href="#"><img class="logo" src="images/content/logo.png" alt="Renault Trucks Deliver" /></a></h1>
        <!-- main -->
        <section id="main">
            <!-- slide -->
			<div id="carousel-wrapper-slide" class="slider">
				<ul id="carousel-content-slide" class="slides">
					<li rel="1" id="slide-1" class="slide">
					<img id="img1" alt="visuel" src="images/content/slide01.jpg"/>
					</li>
					<li rel="2" id="slide-2" class="slide">
					<img id="img2" alt="visuel" src="images/content/slide02.jpg"/>
					</li>
					<li rel="3" id="slide-3" class="slide">
					<img id="img3" alt="visuel" src="images/content/slide03.jpg"/>
					</li>
					<li rel="4" id="slide-4" class="slide">
					<img id="img4" alt="visuel" src="images/content/slide01.jpg"/>
					</li>
				</ul>
			</div>
			<div>
				<a id='effects_bottom_box' class="show_box" href="#">&nbsp;</a>
				<ul id="control-nav" class="control-nav">
				  <li><a class="carousel-jumper carousel-selected" rel="slide-1" href="#"><span>&nbsp;</span></a></li>
				  <li><a class="carousel-jumper" rel="slide-2"  href="#"><span>&nbsp;</span></a></li>
				  <li><a class="carousel-jumper" rel="slide-3"  href="#"><span>&nbsp;</span></a></li>
				  <li><a class="carousel-jumper" rel="slide-4"  href="#"><span>&nbsp;</span></a></li>
				</ul>
			</div>
            <!-- fin slide -->
            
            <!-- compte_rebours -->
            <div id='compte_rebours' class="compte_rebours">
                <img src="images/content/visuel01.png" alt="Compte à rebours" />
                <span>A truck should be a profit center</span>
                <span class="date">11 June 2013</span>
            </div>
            <!-- fin compte_rebours -->
        </section>
        <!-- fin main -->
		<!-- bottom_box -->
        <div id='bottom_box' class="bottom_box">
		<div id='form_mail_carousel' class="inside">
			<!-- join the show -->
			<div  class="join_show">
				<div>
					<h3>Join the show on internet</h3>
					<span class="label">to discover the radical new range</span>
				</div>
				<form method="post" action="#">
					<fieldset>
						<input type="text" name="Enter your e-mail"  value="Enter your e-mail" onBlur="this.value=this.value==''?'Enter your e-mail':this.value;" onFocus="this.value=''" />
						<input onClick="Modalbox.show($('testContent'), {title: this.title, height: 250, width: 320 }); return false;" type="submit" name="OK" value="OK" />
					</fieldset>
				</form>
				<!-- popin -->
				<div style="display: none" id="testContent">
					<div class="popin_form">
						<h2>Join the show on internet</h2>
						<form method="post" action="#">
							<fieldset>
								<input type="text" name="Enter your e-mail"  value="Enter your e-mail" onBlur="this.value=this.value==''?'Enter your e-mail':this.value;" onFocus="this.value=''" />
								<div>
									<input type="radio" name="case1" value="" />
									<label>
										J'accepte d'être contacté(e) ultérieurement par 
										Renault Trucks par courrier électronique concernant 
										le lancement de la nouvelle Gamme Renault Trucks. 
										A l'occasion de chaque envoi, j'aurai la possibilité 
										de mettre fin à cet accord.
									</label>
						    </div>
								 <div>
									<input type="radio" name="case1" value="" />
									<label>
										Je n'accepte pas d'etre contacté(e) ulterieurement par Renault et son reseau par courrier électronique.
									</label>
								 </div>
								 <input class="clearfix" type="submit" name="valider" value="valider" />
							</fieldset>
						</form>
					</div>
				</div>
				<!-- fin popin -->
			</div>
			<!-- fin join the show -->
			<!-- diapo -->
			<div class="carousel" id="home_carousel">
				<div class="defil_slide carousel-control-next">
					<a id="c_next" rel="next" class="carousel-control next" href="javascript:"><img src="images/content/next.png" alt="next" /></a>
				</div>
				<div class="defil_slide carousel-control-prev">
					<a id="c_prev" rel="prev" class="carousel-control prev" style="display: none;" href="javascript:"><img src="images/content/prev.png" alt="prev" /></a> 
				</div>	
				<div class="diapo" id="carousel-wrapper">
					<div>
						<div class="carousel_slide">
							<ul id="carousel-content">
								<li class="new new_width_txt slide_li" >
									<div>
										<a class="play_video" href="https://www.youtube.com/embed/WgnEumywO2I?wmode=transparent" ><img class="image" src="images/content/visuel1.jpg" alt="video" />
										<img class="player" src="images/content/player.png" alt="player" />
										<span class="txt">a magnum with the colors of gold?</span></a>
									</div>
								</li>
								<li class="new new_width_txt slide_li">
									<div>
										<a class="play_video" href="https://www.youtube.com/embed/zB1EgEK8XHc?wmode=transparent"><img class="image" src="images/content/visuel1.jpg" alt="video" />
										<img class="player" src="images/content/player.png" alt="player" />
										<img class="masque" src="images/content/masque_new.png" alt="new" />
										<span class="txt">a magnum with the colors of gold?</span></a>
									</div>
								</li>
								<li class="coming_soon slide_li">
									<div>
										<img src="images/content/video_verr.png" alt="video" />
										<span class="jour_j">J-46</span>
										<span class="txt">coming soon!</span>
									</div>
								</li>
								<li class="coming_soon slide_li">
									<div>
										<img src="images/content/video_verr.png" alt="video" />
										<span class="jour_j">J-39</span>
										<span class="txt">coming soon!</span>
									</div>
								</li>
								<li class="coming_soon slide_li">
									<div>
										<img src="images/content/video_verr.png" alt="video" />
										<span class="jour_j">J-26</span>
										<span class="txt">coming soon!</span>
									</div>
								</li>
				                <li class="coming_soon slide_li">
					                  <div>
					                    <img src="images/content/video_verr.png" alt="video" />
					                    <span class="jour_j">J-26</span>
					                    <span class="txt">coming soon!</span>
					                  </div>
				                </li>
				                <li class="coming_soon slide_li">
					                  <div>
					                    <img src="images/content/video_verr.png" alt="video" />
					                    <span class="jour_j">J-26</span>
					                    <span class="txt">coming soon!</span>
					                  </div>
				                </li>
							</ul>
						</div>
            
					</div>
				</div>
			</div>
			<!-- fin diapo -->
		</div>
		</div>
        <!-- fin bottom_box -->
		<!-- detail_box -->
			<div id='detail_box' class="detail_box">
				<!-- top -->
				<div class="top">
					<div class="inside">
						<div class="form_join_show">
							<h3>Join the show on internet</h3>
							<span class="label">to discover the radical new range</span>
							<form method="post" action="#">
								<fieldset>
									<input type="text" name="Enter your e-mail"  value="Enter your e-mail" onBlur="this.value=this.value==''?'Enter your e-mail':this.value;" onFocus="this.value=''" />
									<input onClick="Modalbox.show($('testContent'), {title: this.title, height: 250, width: 320 }); return false;" type="submit" name="OK" value="OK" />
								</fieldset>
							</form>
						</div>
						<!-- content_box -->
						<div id="content_box" class="content_box">
							<div class="bloc_content_box current_box_selected">
								<span class="jour_j">J-36</span>
								<h2>interview of lorem ipsum dolor set !</h2>
								<p>The true story of a new truck birth’s, lorem ipsum dolor set amet consectetuer</p>
								<ul class="rs">
									<li><a href="#"><img src="images/content/facebook_s.png" alt="facebook" /></a></li>
									<li><a href="#"><img src="images/content/twitter_s.png" alt="twitter" /></a></li>
								</ul>
							</div>
							<div class="bloc_content_box">
								<span class="jour_j">J-37</span>
								<h2>interview of lorem ipsum dolor set !</h2>
								<p>The true story of a new truck birth’s, lorem ipsum dolor set amet consectetuer</p>
								<ul class="rs">
									<li><a href="#"><img src="images/content/facebook_s.png" alt="facebook" /></a></li>
									<li><a href="#"><img src="images/content/twitter_s.png" alt="twitter" /></a></li>
								</ul>
							</div>
						</div>
						<!-- fin content_box -->
					</div>
				</div>
				<!-- fin top -->
				<!-- bottom -->
				<div class="bottom">
					<div class="iframe">
					
					<iframe id='youtube_video' style="display:block;" height="425" src="" frameborder="0" allowfullscreen=""></iframe>
					<a href="#" id="close_video_iframe" class="close_iframe" ></a>
					</div>
					<ul>
						<li><a href="http://www.renault-trucks.com">www.renault-trucks.com</a></li>
						<li>&ndash;</li>
						<li>Mentions légales</li>
						<li>&ndash;</li>
						<li>crédits</li>
					</ul>
					<span class="copyright">Copyright © 2012-2014 Renault Trucks</span>
				</div>
				<!-- fin bottom -->
			</div>
		<!-- fin detail_box -->
			
        <!-- footer -->
        <footer>
			<div class="footer">
				<a href="#"><img class="logo_marque" src="images/content/logo_m.png" alt="Renault Trucks" /></a>
				<div class="continents-wrapper">
					 <div id='language_select_content' class='language_select_content' style="display: none;">
					  <ul id='language_select'>
						<li class='language'><a href="?lang=fr">FRANCAIS</a></li>
						<li class='language'><a href="#">DANSK</a></li>
						<li class='language'><a href="#">DEUTCH</a></li>
						<li class='language'><a href="#">FLEMISH</a></li>
						<li class='language'><a href="#">ITALIAN</a></li>
						<li class='language'><a href="#">DANSK</a></li>
						<li class='language'><a href="#">DEUTCH</a></li>
						<li class='language'><a href="#">FLEMISH</a></li>
						<li class='language'><a href="#">ITALIAN</a></li>
						<li class='language'><a href="#">DANSK</a></li>
						<li class='language'><a href="#">DEUTCH</a></li>
						<li class='language'><a href="#">FLEMISH</a></li>
						<li class='language'><a href="#">ITALIAN</a></li>
						<li class='language'><a href="#">DANSK</a></li>
						<li class='language'><a href="#">DEUTCH</a></li>
						<li class='language'><a href="#">FLEMISH</a></li>
						<li class='language'><a href="#">ITALIAN</a></li>
						<li class='language'><a href="#">DANSK</a></li>
						<li class='language'><a href="#">DEUTCH</a></li>
						<li class='language'><a href="#">FLEMISH</a></li>
						<li class='language'><a href="#">ITALIAN</a></li>
						<li class='language selected'><a href="?lang=en">ENGLISH</a></li>
					  </ul>
					</div>
					<ul id='ul_language_selected' class="continents">
						<li class='language_selected closed'><a href="#">ENGLISH</a></li>
					</ul>
	
				</div>
				<!-- reseau sociaux -->
				<ul class="rs">
					<li><a href="#"><img src="images/content/facebook.png" alt="facebook" /></a></li>
					<li><a href="#"><img src="images/content/twitter.png" alt="twitter" /></a></li>
					<li><a href="#"><img src="images/content/youtube.png" alt="youtube" /></a></li>
				</ul>
				<!-- fin reseau sociaux -->
				<!-- area_box -->
				<div class="area_box">
					<a class="fav" href="#"><img src="images/content/fav.png" alt="Favoris" /></a>
					<span class="separateur">|</span>
					  <!-- AddThis Button BEGIN -->
					  <div class="addthis_toolbox addthis_default_style addthis_16x16_style" addthis:url="http://example.com">
					  <a class="addthis_button_compact"></a>
					  <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
					  <a class="addthis_button_facebook"></a>
					  <a class="addthis_button_twitter"></a>
					  <a class="addthis_button_google_plusone_share"></a>
					  <a class="addthis_button_email"></a>
					  </div>
					  <script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=undefined"></script>
					  <!-- AddThis Button END -->
				</div>
				<!-- fin area_box -->
			</div>
        </footer>
        <!-- fin footer -->
    </div>
    <!-- fin wrapper -->
</body>
</html>
